<template>
	<div>
		<div class="publicpageview" id="publicpageview">
			<div style="text-align: center;font-weight: bold;margin-top: 20px;">直管公产非住宅房屋租金测算汇总表（二）</div>
			<div style="display: flex;margin-top: 20px;box-sizing: border-box;">
				<div class="list3">行业类别</div>
				<div class="list3">建筑面积(㎡)</div>
				<div class="list3">计租面积(㎡)</div>
				<div class="list3">新租金额(元)</div>
				<div class="list3">原租金额(元)</div>
				<div class="list3">调增额(元)</div>
				<div class="list3">调增率(%)</div>
			</div>
			<div style="display: flex;box-sizing: border-box;" v-for="(item,index) in list" :key="index">
				<div class="list3">{{item.rentWay}}</div>
				<div class="list3">{{item.buildingArea}}</div>
				<div class="list3">{{item.rentArea}}</div>
				<div class="list3">{{item.rentPrice}}</div>
				<div class="list3">{{item.oldRentPrice}}</div>
				<div class="list3">{{item.price}}</div>
				<div class="list3">{{item.score}}</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list3">合计</div>
				<div class="list3">{{hejiObject.buildingArea}}</div>
				<div class="list3">{{hejiObject.rentArea}}</div>
				<div class="list3">{{hejiObject.rentPrice}}</div>
				<div class="list3">{{hejiObject.oldRentPrice}}</div>
				<div class="list3">{{hejiObject.price}}</div>
				<div class="list3">{{hejiObject.score}}</div>
			</div>
		</div>
		<button style="margin: 10px auto 0;display: block;" @click="handleout">打印直管公产非住宅房屋租金测算汇总表（一）</button>
	<!-- 	
		<button style="margin: 10px auto 0;display: block;" v-print="printObj">打印住宅房屋租金调整过程记录表</button>
		<div id="loading" v-show="printLoading"></div> -->
	</div>
</template>

<script>
	import * as XLSX from 'xlsx'
	import dayjs from 'dayjs'
	import {
		houseAdminList,
		addRoom,
		roomDetails,
		updRoom,
		blockList,
		blockDetail
	} from '@/api/industry'
	export default {
		props: {
			blockobj: Object
		},
		name: 'zujintiaozhengguocheng',
		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				list:[],
				topContet:{},
				hejiObject:{
					buildingArea:0,
					rentArea:0,
					rentPrice:0,
					oldRentPrice:0,
					price:0,
					score:0
				}
			}
		},
		computed: {},
		mounted() { 
			console.log(this.blockobj)
			this.list = this.blockobj.export1List	
			this.topContet = this.blockobj.exportTou
			if(this.list){
				this.list.forEach((item,index)=>{
					this.hejiObject.buildingArea = Number(this.hejiObject.buildingArea )+Number(item.buildingArea)
					this.hejiObject.rentArea = Number(this.hejiObject.rentArea )+Number(item.rentArea)
					this.hejiObject.rentPrice = Number(this.hejiObject.rentPrice )+Number(item.rentPrice)
					this.hejiObject.oldRentPrice = Number(this.hejiObject.oldRentPrice )+Number(item.oldRentPrice)
					this.hejiObject.price = Number(this.hejiObject.price )+Number(item.price)
					this.hejiObject.score = Number(this.hejiObject.score )+Number(item.score)
				})
			}
		},

		methods: {
			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					let list = this.list
					let outList = []
					this.list.forEach((item, index) => {
						outList.push({
							行业类别: item.rentWay,
							'建筑面积(㎡)': item.buildingArea,
							'计租面积(㎡)': item.rentArea,
							'新租金额(元)': item.rentPrice,
							'原租金额(元)': item.oldRentPrice,
							'调增额(元)': item.price,
							'调增率(%)': item.score
						})
					})
					outList.push({
						行业类别: '合计',
						'建筑面积(㎡)': this.hejiObject.buildingArea,
						'计租面积(㎡)': this.hejiObject.rentArea,
						'新租金额(元)': this.hejiObject.rentPrice,
						'原租金额(元)': this.hejiObject.oldRentPrice,
						'调增额(元)': this.hejiObject.price,
						'调增率(%)': this.hejiObject.score
					})
					// 获取表格数据
					const data = outList
					// 转换数据为工作表
					const worksheet = XLSX.utils.json_to_sheet(data)
					// 创建新的工作簿
					const workbook = XLSX.utils.book_new()
					// 将工作表添加到工作簿
					XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
					// 导出Excel文件
					XLSX.writeFile(workbook, '直管公产非住宅房屋租金测算汇总表（二）.xlsx')
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消导出'
					})
				})
			}
		},
	}
</script>

<style scoped>
	.publicpageview {
		width: 900px;
		height: auto;
		background-color: #fff;
		margin: 20px auto 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 10px;
		outline: 1px solid black;
	}

	.list1 {
		width: 100px;
		box-sizing: border-box;
		height: 30px;
		line-height: 30px;
		text-align: center;
		outline: 1px solid black;
	}

	.list2 {
		width: 50px;
		height: 30px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
	}

	.left {
		width: 25px;
		height: 360px;
		outline: 1px solid black;
		line-height: 180px;
		text-align: center;
		box-sizing: border-box;
	}

	.list3 {
		width: 120px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
		font-size: 12px
	}
</style>